<template>
  <div>
    <el-form :inline="true" :model="reques" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="reques.materialrequisitionnamecode"
          placeholder="请输入领料单编号/名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="reques.workordernamecode"
          placeholder="请输入工单编号/名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="reques.materialrequisitiondate"
          type="date"
          placeholder="请选择领料日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="chaxun">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="tiaozhuan">添加</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="id" label="序号" width="100" />
      <el-table-column
      fixed
        prop="materialrequisitionname"
        label="领料单名称"
        width="120"
      />
      <el-table-column
      fixed
        prop="materialrequisitioncode"
        label="领料单编号"
        width="160"
      />
      <el-table-column
       fixed
        prop="materialrequisitiondate"
        label="领料日期"
        width="200"
      />
      <el-table-column prop="person" label="领料人" width="100" />
      <el-table-column prop="workordername" label="工单名称" width="120" />
      <el-table-column prop="workordercode" label="工单编号" width="160" />
      <el-table-column prop="taskname" label="任务名称" width="120" />
      <el-table-column prop="taskcode" label="任务编号" width="160" />
      <el-table-column prop="processroute" label="工艺路线" width="120" />
      <el-table-column prop="processname" label="工序名称" width="120" />
      <el-table-column prop="processname" label="备注" width="200" />
      <el-table-column fixed="right" label="操作" width="250">
        <template #default="scope">
          <span v-if="scope.row.state==false">
            <el-button link type="primary" size="small" @click="handleClick"
            >出库</el-button
          >
          <el-button link type="primary" size="small">编辑</el-button>
          <el-button link type="primary" size="small">删除</el-button>
          <el-button link type="primary" @click="dayin" size="small">打印</el-button></span>
        </template>
      </el-table-column>
    </el-table>
    <div>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="reques.pageindex"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="reques.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
    </div>
  </div>
</template>
  
<script>
import { ref, reactive } from "vue";
import { MaterialShow,Materialdayin } from "../../api/production";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const tableData = ref([]);
    const count = ref(0);
    const reques = reactive({
      pageindex: 1,
      pagesize: 10,
      materialrequisitionnamecode: null,
      workordernamecode: null,
      materialrequisitiondate: null,
    });

    const GetShow = () => {
      MaterialShow(reques).then((ros) => {
        tableData.value = ros.result.items;
        count.value = ros.result.totalCount;
      });
    };
    GetShow();

    const handleSizeChange = (value) => {
      reques.pagesize = value;
      GetShow();
    };
    const handleCurrentChange = (value) => {
      reques.pageindex = value;
      GetShow();
    };
    const chaxun = () => {
      GetShow();
    };
    const tiaozhuan =()=>{
        router.push({
        path: "/MaterialRequiseAdd"
    });
    };
    const dayin = ()=>{
      Materialdayin().then(ros=>{
        if(ros==true)
        {
          alert("导出成功")
        }
      })
    }
    return {
      tableData,
      count,
      reques,
      handleSizeChange,
      handleCurrentChange,
      chaxun,
      tiaozhuan,
      dayin
    };
  },
};
</script>